<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>Efeitos com jQuery</title>
	<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>

$(function(){
 
$("div.contaba").hide();
$("div.contaba:first").show();
$("#abas a:first").addClass("selected");
$("#abas a").click(function(){
$("div.contaba").hide();
$("#abas a").removeClass("selected");
$(this).addClass("selected");
$($(this).attr("href")).show();
return false;
}); 
});

</script>
</head>

<body>


<ul id="abas">
 

                <li><a href="#tab1">Aba 1</a></li>
 

                <li><a href="#tab2">Aba 2</a></li>
 

    </ul>
 

 
 

<!-- conteudo das abas -->
 

    <div id="tab1" class="contaba">
 

    <a name="tab1" />
 

       Conteudo 1
 

    </div>
 

    <div id="tab2" class="contaba">
 

    <a name="tab1" />
 

       Conteudo 2
 
    </div> 


</body>
</html>
